<template>
	<view class="content">
		<view class="top">
			<view class="search">
				<button>搜索</button>
				<input type="text" value="" v-model="search" placeholder="搜索公猪管理/物料/攻略"/>
			</view>
		</view>
		<view class="menu1">
			<view>
				<image src="../../static/images/online-consult.png" mode=""></image>
				<text>在线咨询</text>
			</view>
			<view>
				<image src="../../static/images/class-consult.png" mode=""></image>
				<text>课程咨询</text>
			</view>
			<view>
				<image src="../../static/images/free.png" mode=""></image>
				<text>免费资料</text>
			</view>
			<view>
				<image src="../../static/images/contact.png" mode=""></image>
				<text>联系我们</text>
			</view>
		</view>
		<view class="list1">
			<view class="list1-top">
				<text class="t1">在线专家</text>
				<text class="t2">查看全部</text>
			</view>
		</view>
		<view class="experts">
			<view class="expert">
				<image src="../../static/images/expert1.jpg" mode=""></image>
				<view class="introduce">
					<text class="i1">猪博士</text>
					<text class="i2">猪卫士在线</text>
				</view>
			</view>
			<view class="expert">
				<image src="../../static/images/expert1.jpg" mode=""></image>
				<view class="introduce">
					<text class="i1">猪博士</text>
					<text class="i2">猪卫士在线</text>
				</view>
			</view>
		</view>
		<view class="menu2">
			<view>
				<image src="../../static/images/home-pig-friend.png" mode=""></image>
				<text>猪友之家</text>
			</view>
			<view>
				<image src="../../static/images/sail.png" mode=""></image>
				<text>种猪导购</text>
			</view>
			<view>
				<image src="../../static/images/store.png" mode=""></image>
				<text>智能小铺</text>
			</view>
			<view>
				<image src="../../static/images/tool.png" mode=""></image>
				<text>工具服务</text>
			</view>
		</view>
		<text class="popular">热门资讯</text>
		<view class="list2">
			<view class="row">
				<view class="item" @tap="toDetail()">
					<image src="../../static/images/pig1.jpeg" mode=""></image>
					<text>母猪的产后护理</text>
				</view>
				<view class="item" @tap="toDetail()">
					<image src="../../static/images/pig1.jpeg" mode=""></image>
					<text>母猪的产后护理</text>
				</view>
			</view>
			<view class="row">
				<view class="item" @tap="toDetail()">
					<image src="../../static/images/pig1.jpeg" mode=""></image>
					<text>母猪的产后护理</text>
				</view>
				<view class="item" @tap="toDetail()">
					<image src="../../static/images/pig1.jpeg" mode=""></image>
					<text>母猪的产后护理</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {  
			...mapState(['user_name', 'logined', 'password','count'])  
		},  
		data() {
			return {
				search:''
			}
		},
		onLoad() {
			// if(!this.hasLogin){
			// 	uni.navigateTo({
			// 		url: '../login/login'
			// 	});
			// }
		
		},
		onShow() {
			uni.setTabBarBadge({
			  index: 2,
			  text: this.count.toString()
			});	
		},
		methods:{
			toDetail(){
				uni.navigateTo({
					url:"detail-page/detail-page"
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.top{
		width: 100%;
		height: 110px;
		background: linear-gradient(to right, #1d6efb , #42beff);
		box-shadow: #000000 0px 1px 33px;
	}
	.search{
		margin-top: 8%;
		margin-left: 5%;
		display: flex;
		
	}
	.search button{
		margin: 0;
		width: 54px;
		height: 30px;
		font-size: 2px;
		border-radius: 0px;
		background: #4CD964;
		color: #FFFFFF;
	}
	.search input{
		background: rgba(0, 0, 0, 0);
		width: 180px;
		height: 30px;
		color: #FFFFFF;
	}
	
	.menu1{
		margin-top: 8%;
		margin-left: 3%;
		display: flex;
	}
	.menu1 view{
		margin-left: 5%;
		display: flex;
		flex-direction: column;
	}
	.menu1 view text{
		margin-top: 12%;
		text-align: center;
	}
	.menu1 view image{
		margin-left: 29%;
		width: 30px;
		height: 30px;
	}
	
	.list1{
		display: flex;
		flex-direction: column;
		padding-left: 7%;
		padding-right: 7%;
	}
	.list1-top{
		margin-top: 6%;
	}
	
	.t1{
		float: left;
		font-size: 25px;
	}
	.t2{
		margin-top: 5%;
		float: right;
		font-size: 15px;
		color: #c6c6c6;
	}
	
	.experts{
		margin:7% 0 0 0;
		width: 100%;
		display: flex;
		border-bottom: #eee solid 7px;
		padding-bottom: 5%;
	}
	.expert{
		display: flex;
		flex-direction: row;
		padding: 1%;
		margin-left: 4%;
		width: 150px;
		height: 80px;
		border: #aeb3c0 solid 1px;
		border-radius: 10px 10px;
	}
	.expert image{
		width: 75px;
		height: 75px;
		border-radius: 50px 50px;
	}
	.introduce{
		width: 50%;
		display: flex;
		flex-direction: column;
		margin-top:5%;
		margin-left: 4%;
	}
	.i1{
		font-size: 20px;
		font-weight: bolder;
	}
	.i2{
		margin-top: 10%;
		color: #c6c6c6;
		font-size: 8px;
	}
	
.menu2{
		margin-top: 3%;
		margin-left: 3%;
		display: flex;
	}
	.menu2 view{
		margin-left: 5%;
		display: flex;
		flex-direction: column;
	}
	.menu2 view text{
		margin-top: 12%;
		text-align: center;
	}
	.menu2 view image{
		margin-left: 29%;
		width: 30px;
		height: 30px;
	}
	
		
	.popular{
		margin-top: 4%;
		margin-left: 7%;
		font-size: 25px;
	}
	
	.list2{
		padding: 0 7% 0 7%;
		display: flex;
		flex-direction: column;
	}
	.row{
		display: flex;
		margin-top: 1%;
	}
	.item{
		
	}
	.item text{
		position: relative;
		top: -15%;
		color: #FFFFFF;
		margin-left: 15%;
	}
	.item image{
		width: 160px;
		height: 160px;
	}
	.row .item:nth-child(2) image{
		margin-left: 7%;
	}
</style>
